<template>
<Layout>
	<el-button type="text" @click="open">点击打开 Message Box</el-button>
	<div class="homePage">
		<div class="indexCount">
			<GetListData ref="GetListData" class="customList" url="/api/content/list.jspx" :payload="payload">
				<template slot-scope="slotProps">
                    <ul class="baseList">
                        <li v-for="item in slotProps.data">
                            <h5>{{ item.title }}</h5>
                        </li>
                    </ul>
                </template>
			</GetListData>
			<HomeBanner></HomeBanner>
		</div>
	</div>
</Layout>
</template>

<script>
import Util from '../libs/util'
import {
	formatDate
} from '../libs/formatDate'
import Layout from '../components/Layout'
import HomeBanner from '../components/Banner'
import GetListData from '../components/GetListData'

export default {
	data() {
		return {
			payload: {
				params: {
					channelIds: 135,
					first: 0,
					count: 5
				}
			}
		}
	},
	methods: {
		open() {
			this.$alert('这是一段内容', '我是标题名称', {
				confirmButtonText: '确定',
				callback: action => {
					const h = this.$createElement;
					this.$message({
						type: 'success',
						message: h('p', null, [
							h('span', null, '内容可以是 '),
							h('i', {
								style: 'color: teal'
							}, 'VNode')
						])
					});
				}
			});
		},
	},
	mounted: function() {
		Util.title()

		// 调用子组件获取数据的方法
		setTimeout(function() {
			this.$refs.GetListData.request({
				params: {
					channelIds: 95,
					first: 0,
					count: 5
				}
			})
		}.bind(this), 2000);

		setTimeout(function() {
			this.$refs.GetListData.request()
		}.bind(this), 4000);
	},
	// 过滤器
	filters: {
		formatDate(time, format) {
			let date = new Date(time)
			return formatDate(date, format)
		}
	},
	components: {
		Layout,
		HomeBanner,
		GetListData
	}
}
</script>
